<template>
    <div>
        <div class="header-box mb10 flex">
            <div class="left-box flex">
                <div class="title-box">
                    <i class="el-icon-s-order"></i>
                    <span>瓦特信息</span>
                </div>
                <el-form :model="queryParams" ref="queryParams" label-width="100px" class="personBox">
                    <el-form-item label="运动员：" prop="sportsmanId">
                        <el-select placeholder="请选择运动员" v-model="queryParams.sportsmanName" clearable size="small" @change="selectPerson">
                            <el-option v-for="(item,index) in channelInfo.person" :key="item.sportsmanId" :label="item.sportsmanName" :value="index"/>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <el-button type="text" @click="goBack">返回</el-button>
        </div>
        <el-card class="details-box mb20" shadow="never" v-if="!without">
            <el-row class="list flex">
                <el-col :span="8" class="list-li" v-for="(item,index) in list" :key="index">
                    <span class="label">瓦特信息{{Number(index+1)}}：</span>
                    <span>{{item}}</span>
                </el-col>
            </el-row>
            <div class="ctime">创建时间：{{channelInfo.ctime}}</div>
        </el-card>
          <el-card v-else class="without" shadow="never">
            暂无信息
        </el-card>
    </div>

</template>
<script>
import { getTrainingGroupChannelInfo } from "@/api/training/trainingGroupChannel";
export default {
    name: "watt", // 瓦特页面
    props: ["channelId"],
    data() {
        return {
            list: [],
            channelInfo: '',
            queryParams: {
                sportsmanName: ''
            },
            without:false,// 暂无信息
        }
    },
    created() {
        this.getChannelInfo()
    },
    methods: {
        // 获取航道详情,显示运动员心率
        getChannelInfo() {
            const id = this.channelId
            getTrainingGroupChannelInfo(id).then((response) => {
                this.channelInfo = response.data
                this.queryParams.sportsmanName=this.channelInfo.person[0].sportsmanName
                 const watt = this.channelInfo.person[0].watt
                if (watt) {
                    this.list = watt.split(" ")
                } else {
                    this.without = true
                }
            });
        },
        // 选择运动员
        selectPerson(index){
              const watt = this.channelInfo.person[index].watt
                if (watt) {
                    this.list = watt.split(" ")
                } else {
                    this.without = true
                }
        },
        // 返回
        goBack() {
            this.$emit('child-event', false)
        }
    }
}
</script>
<style lang="scss" scoped>
.flex {
    display: flex;
    align-items: center;
}
.header-box {
    justify-content: space-between;
    .title-box {
        color: #409eff;
        font-size: 16px;
        margin-right: 30px;
    }
    .personBox {
        .el-form-item {
            margin-bottom: 0;
        }
    }
}
.details-box {
    background: #f2f6fc;
    // padding:10px 15px 5px;
    .list {
        flex-wrap: wrap;
        .list-li {
            margin: 10px 0;
            color: #666;
            .label {
                font-size: 14px;
                color: #606266;
                font-weight: bold;
            }
        }
    }
    .ctime {
        text-align: right;
        color: #999;
        margin-top: 10px;
        font-size: 14px;
    }
}
</style>